<template>
  <el-collapse accordion>
    <el-collapse-item title="验收类" name="1">
      <div class="cardShow">

        <div class="card" @click="toYanshouTable">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>单位工程验收记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
          <i class="el-icon-s-claim"></i>
          <div style="display: flex; justify-content: center; align-items: center">
            <span>分部验收记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
          <i class="el-icon-s-claim"></i>
          <div style="display: flex; justify-content: center; align-items: center">
            <span>分项验收记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
          <i class="el-icon-s-claim"></i>
          <div style="display: flex; justify-content: center; align-items: center">
            <span>检验批验收记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
          <i class="el-icon-s-claim"></i>
          <div style="display: flex; justify-content: center; align-items: center">
            <span>检验批原始记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
          <i class="el-icon-s-claim"></i>
          <div style="display: flex; justify-content: center; align-items: center">
            <span>隐蔽验收记录(钢筋)</span>
          </div>
        </div>

      </div>
    </el-collapse-item>
    <el-collapse-item title="混凝土施工记录" name="2">
      <div class="secondMenu">
        标养试块
      </div>
      <div class="cardShow">

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>混凝土施工台账(标养)</span>
          </div>
        </div>

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>见证取样记录(标养)</span>
          </div>
        </div>

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>混凝土施工记录</span>
          </div>
        </div>

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>养护记录</span>
          </div>
        </div>

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>试块评定</span>
          </div>
        </div>

      </div>
      <div class="secondMenu">
        同养试块
      </div>
      <div class="cardShow">

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>混凝土施工台账(同养)</span>
          </div>
        </div>

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>见证取样记录(同养)</span>
          </div>
        </div>

        <div class="card" @click="toHunNingTu">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>同养测温记录</span>
          </div>
        </div>

      </div>
    </el-collapse-item>
    <el-collapse-item title="物资类" name="3">
      <div class="secondMenu">
        钢筋
      </div>
      <div class="cardShow">

        <div class="card" @click="toYanshouTable">
        <!-- <div class="card" @click="toWuZi"> -->
          <i class="el-icon-s-claim"></i>
          <div>
            <span>进场报验单</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
        <!-- <div class="card" @click="toWuZi"> -->
          <i class="el-icon-s-claim"></i>
          <div>
            <span>进场验收记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
        <!-- <div class="card" @click="toWuZi"> -->
          <i class="el-icon-s-claim"></i>
          <div>
            <span>见证取样记录</span>
          </div>
        </div>

        <div class="card" @click="toYanshouTable">
        <!-- <div class="card" @click="toWuZi"> -->
          <i class="el-icon-s-claim"></i>
          <div>
            <span>台账</span>
          </div>
        </div>

        <div class="card" @click="toWuZi">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>试验报告</span>
          </div>
        </div>

      </div>
      <div class="secondMenu">
        防水卷材
      </div>
      <div class="secondMenu">
        防水涂料
      </div>
    </el-collapse-item>
    <el-collapse-item title="现场检验类" name="4">
      <div class="secondMenu">
        钢筋机械连接
      </div>
      <div class="cardShow">

        <div class="card" @click="toXianChang1">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>工艺检台账</span>
          </div>
        </div>

        <div class="card" @click="toXianChang1">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>施工检台账</span>
          </div>
        </div>

        <div class="card" @click="toXianChang1">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>见证取样记录</span>
          </div>
        </div>

      </div>
      <div class="secondMenu">
        钢筋焊接
      </div>
      <div class="cardShow">

        <div class="card" @click="toXianChang2">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>工艺检台账</span>
          </div>
        </div>

        <div class="card" @click="toXianChang2">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>施工检台账</span>
          </div>
        </div>

        <div class="card" @click="toXianChang2">
          <i class="el-icon-s-claim"></i>
          <div>
            <span>见证取样记录</span>
          </div>
        </div>

      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>

export default {
  data() {
    return {}
  },
  methods: {
    toYanshouTable() {
      console.log('进行了页面跳转')
      const span = event.currentTarget.querySelector('span');
      if (span) {
        const text = span.textContent || span.innerText; // 获取 span 的文字内容
        console.log('span 文字内容:', text); // 控制台输出
        switch (text) {
          case '单位工程验收记录':
            console.log('跳转至单位工程验收记录报表');
            break;
          case '分部验收记录':
            console.log('跳转至分部验收记录报表');
            this.$router.push({ path: '/menus/statement/statementTable/fenbuCheck' });
            break;
          case '分项验收记录':
            console.log('跳转至分项验收记录');
            this.$router.push({ path: '/menus/statement/statementTable/fenxiangCheck' });
            break;
          case '检验批验收记录':
            console.log('跳转至检验批验收记录');
            this.$router.push({ path: '/menus/statement/statementTable/inspectCheck' })
            break;
          case '检验批原始记录':
            console.log('跳转至检验批原始记录');
            this.$router.push({ path: '/menus/statement/statementTable/originalInspectCheck' })
            break;
          case '进场报验单':
            console.log('跳转至进场报验单');
            this.$router.push({ path: '/menus/statement/statementTable/baoshen' })
            break;
          case '进场验收记录':
            console.log('跳转至检验批原始进场验收记录');
            this.$router.push({ path: '/menus/statement/statementTable/jinchangjianyan' })
            break;
          case '见证取样记录':
            console.log('跳转至检验批原始见证取样记录');
            this.$router.push({ path: '/menus/statement/statementTable/jianzheng' })
            break;
          case '台账':
            console.log('跳转至台账');
            this.$router.push({ path: '/menus/statement/statementTable/taizhang' })
            break;
          case '隐蔽验收记录(钢筋)':
            console.log('跳转至隐蔽验收记录(钢筋)');
            break;
          default:
            console.log('跳转失败，请检查路由');
            break;
        }
      } else {
        console.warn('未找到 span 元素');
        this.$message.error('跳转报表页面失败，请联系管理员')
      }
    },
    toHunNingTu() {
      console.log('进行了页面跳转')
      const span = event.currentTarget.querySelector('span')
      if (span) {
        const text = span.textContent || span.innerText
        console.log('span文字内容:', text)
        switch (text) {
          case '混凝土施工台账(标养)' :
            console.log('跳转至标养混凝土施工台账')
            this.$router.push({ path: '/menus/statement/statementTable/biaoHun-shiGongTaiZhang' })
            break
          case '见证取样记录(标养)' :
            console.log('跳转至标养见证取样记录')
            this.$router.push({ path: '/menus/statement/statementTable/biaoHun-jianZhengQuYang' })
            break
          case '混凝土施工记录' :
            console.log('跳转至混凝土施工记录')
            this.$router.push({ path: '/menus/statement/statementTable/biaoHun-shiGongJiLu' })
            break
          case '养护记录' :
            console.log('跳转至养护记录')
            this.$router.push({ path: '/menus/statement/statementTable/biaoHun-yangHuJiLu' })
            break
          case '试块评定' :
            console.log('跳转至试块评定')
            this.$router.push({ path: '/menus/statement/statementTable/biaoHun-shiKuaiPingDing' })
            break
          case '混凝土施工台账(同养)' :
            console.log('跳转至同养混凝土施工台账')
            this.$router.push({ path: '/menus/statement/statementTable/tongHun-shiGongTaiZhang' })
            break
          case '见证取样记录(同养)' :
            console.log('跳转至同养见证取样记录')
            this.$router.push({ path: '/menus/statement/statementTable/tongHun-jianZhengQuYang' })
            break
          case '同养测温记录':
            console.log('跳转至同养测温记录')
            this.$router.push({ path: '/menus/statement/statementTable/tongHun-ceWenJiLu' })
            break
        }
      } else {
        console.warn('未找到 span 元素')
        this.$message.error('跳转报表页面失败，请联系管理员')
      }
    },
    toWuZi() {
      console.log('进行了页面跳转')
      const span = event.currentTarget.querySelector('span')
      if (span) {
        const text = span.textContent || span.innerText
        console.log('span文字内容:', text)
        switch (text) {
          case '进场报验单':
            console.log('跳转至进场报验单')
            this.$router.push({ path: '/menus/statement/statementTable/wuZi-jinChangBaoYan' })
            break
          case '进场验收记录':
            console.log('跳转至进场验收记录')
            this.$router.push({ path: '/menus/statement/statementTable/wuZi-jinChangYanShou' })
            break
          case '见证取样记录':
            console.log('跳转至见证取样记录')
            this.$router.push({ path: '/menus/statement/statementTable/wuZi-jianZhengQuYang' })
            break
          case '台账':
            console.log('跳转至台账')
            this.$router.push({ path: '/menus/statement/statementTable/wuZi-gangJinTaiZhang' })
            break
          case '试验报告':
            console.log('跳转至试验报告')
            break
        }
      } else {
        console.warn('未找到 span 元素')
        this.$message.error('跳转报表页面失败，请联系管理员')
      }
    },
    toXianChang1() {
      console.log('进行了页面跳转')
      const span = event.currentTarget.querySelector('span')
      const spanId = span.id
      if (span) {
        const text = (span.textContent || span.innerText) + spanId
        console.log('span文字内容:', text)
        switch (text) {
          case '工艺检台账':
            console.log('跳转至工艺检台账1')
            this.$router.push({ path: '/menus/statement/statementTable/xianLian-gongYiJian' })
            break
          case '施工检台账':
            console.log('跳转至施工检台账1')
            this.$router.push({ path: '/menus/statement/statementTable/xianLian-shiGongJian' })
            break
          case '见证取样记录':
            console.log('跳转至见证取样记录1')
            this.$router.push({ path: '/menus/statement/statementTable/xianLian-jianZhengQuYang' })
            break
        }
      } else {
        console.warn('未找到 span 元素')
        this.$message.error('跳转报表页面失败，请联系管理员')
      }
    },
    toXianChang2() {
      console.log('进行了页面跳转')
      const span = event.currentTarget.querySelector('span')
      const spanId = span.id
      if (span) {
        const text = (span.textContent || span.innerText) + spanId
        console.log('span文字内容:', text)
        switch (text) {
          case '工艺检台账':
            console.log('跳转至工艺检台账2')
            this.$router.push({ path: '/menus/statement/statementTable/xianHan-gongYiJian' })
            break
          case '施工检台账':
            console.log('跳转至施工检台账2')
            this.$router.push({ path: '/menus/statement/statementTable/xianHan-shiGongJian' })
            break
          case '见证取样记录':
            console.log('跳转至见证取样记录2')
            this.$router.push({ path: '/menus/statement/statementTable/xianHan-jianZhengQuYang' })
            break
        }
      } else {
        console.warn('未找到 span 元素')
        this.$message.error('跳转报表页面失败，请联系管理员')
      }
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
::v-deep .el-collapse-item__header {
  font-family: '黑体', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

/* 卡片展示区域div样式 */
.cardShow {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 20px 20px;
  cursor: pointer;
  height: 150px;
  width: 100px;
}

.el-icon-s-claim {
  font-size: 100px;
  display: block;
  color: #409eff;
}

.card div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card div span {
  text-align: center;
  font-weight: 700;
}

.secondMenu {
  font-size: 15px;
  font-weight: bold;
  margin: 10px;
  font-family: '微软雅黑', sans-serif;
}
</style>
